$(function () {
    var areaChart = echarts.init(document.getElementById("echarts-area-chart"));
    var areaoption = {
        grid:{
            x:40,
            x2:2
        },
        dataZoom : {
            show : true,
            realtime: true,
            start : 50,
            end : 100
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : true,
                axisTick: {onGap:false},
                splitLine: {show:false},
                data : [
                    "2017/1/24", "2017/1/25", "2017/1/28", "2017/1/29", "2017/1/30",
                    "2017/1/31", "2017/2/1", "2017/2/4", "2017/2/5", "2017/2/6",
                    "2017/2/7", "2017/2/8", "2013/2/18", "2017/2/19", "2017/2/20",
                    "2017/2/21", "2017/2/22", "2013/2/25", "2017/2/26", "2017/2/27",
                    "2017/2/28", "2017/3/1", "2013/3/4", "2017/3/5", "2017/3/6",
                    "2017/3/7", "2017/3/8", "2017/3/11", "2017/3/12", "2017/3/13",
                    "2017/3/14", "2017/3/15", "2017/3/18", "2017/3/19", "2017/3/20",
                    "2017/3/21", "2017/3/22", "2017/3/25", "2017/3/26", "2017/3/27",
                    "2017/3/28", "2017/3/29", "2017/4/1", "2017/4/2", "2017/4/3",
                    "2017/4/8", "2017/4/9", "2013/4/10", "20173/4/11", "2017/4/12",
                    "2017/4/15", "2017/4/16", "2017/4/17", "2017/4/18", "2017/4/19",
                    "2017/4/22", "2017/4/23", "2017/4/24", "2017/4/25", "2017/4/26",
                    "2017/5/2", "2017/5/3", "2017/5/6", "2017/5/7", "2017/5/8",
                    "2017/5/9", "2017/5/10", "2017/5/13", "2017/5/14", "2017/5/15",
                    "2017/5/16", "2017/5/17", "2017/5/20", "2017/5/21", "2017/5/22",
                    "2017/5/23", "2017/5/24", "2017/5/27", "2017/5/28", "2017/5/29",
                    "2017/5/30", "2017/5/31", "2017/6/3", "2017/6/4", "2017/6/5",
                    "2017/6/6", "2017/6/7", "2017/6/13"
                ]
            }
        ],
        yAxis : [
            {
                type : 'value',
                scale:true,
                boundaryGap: [0.01, 0.01]
            }
        ],
        series : [
            {
                name:'舆情走势',
                type:'line',
                data:
                    [2320.26,2300.05,2295.35,2347.22,2360.75,
                        2383.43,2377.41,2425.92,2416.62,2432.4,
                        2414.4,2443.03,2378.82,2325.95,2309.17,
                        2378.82,2297.77,2313.22,2292.03,2324.63,
                        2274.81,2326.31,2270.1,2328.14,2314.68,
                        2310.59,2296.58,2320.96,2269.31,2278.4,
                        2250,2312.08,2318.21,2324.24,2311.6,
                        2330.81,2299.38,2301.26,2289,2323.48,
                        2234.9,2227.74,2220.44,2253.42,2224.93,
                        2226.13,2212.56,2233.04,2169.63,2194.85,
                        2165.78,2196.43,2236.4,2242.17,2232.26,
                        2245.12,2203.89,2177.91,2173.86,2210.58,
                        2320.26,2300.05,2295.35,2347.22,2360.75,
                        2383.43,2377.41,2425.92,2416.62,2432.4,
                        2414.4,2443.03,2378.82,2325.95,2309.17,
                        2378.82,2297.77,2313.22,2292.03,2324.63,
                        2274.81,2326.31,2270.1,2328.14,2314.68,
                        2310.59,2296.58,2320.96],
                areaStyle: {
                    normal: {
                        color: '#fb161b',
                        opacity: 0.08
                    }
                },
            }
        ]
    };
    areaChart.setOption(areaoption);
    $(window).resize(areaChart.resize);

    var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
    var baroption = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data:['财经','社会','新闻','招聘','投诉/举报','社交论坛','行政处罚','司法公告','其他']
        },
        series: [
            {
                name:'',
                type:'pie',
                radius: ['40%', '60%'],
                label: {
                    normal: {
                        formatter: '  {b|{b}：}{c}  {per|{d}%}  ',
                        backgroundColor: '#eee',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        borderRadius: 4,
                        // shadowBlur:3,
                        // shadowOffsetX: 2,
                        // shadowOffsetY: 2,
                        // shadowColor: '#999',
                        // padding: [0, 7],
                        rich: {
                            // abg: {
                            //     backgroundColor: '#333',
                            //     width: '100%',
                            //     align: 'right',
                            //     height: 22,
                            //     borderRadius: [4, 4, 0, 0]
                            // },
                            hr: {
                                borderColor: '#aaa',
                                width: '100%',
                                borderWidth: 0.5,
                                height: 0
                            },
                            b: {
                                fontSize: 13,
                                lineHeight: 22
                            },
                            per: {
                                color: '#eee',
                                backgroundColor: '#334455',
                                padding: [2, 4],
                                borderRadius: 2
                            }
                        }
                    }
                },
                data:[
                    {value:335, name:'财经'},
                    {value:310, name:'社会'},
                    {value:234, name:'新闻'},
                    {value:335, name:'招聘'},
                    {value:310, name:'投诉/举报'},
                    {value:234, name:'社交论坛'},
                    {value:335, name:'行政处罚'},
                    {value:310, name:'司法公告'},
                    {value:234, name:'其他'}
                ]
            }
        ]
    };
    barChart.setOption(baroption);
    $(window).resize(barChart.resize);

    var barChart2 = echarts.init(document.getElementById("echarts-bar-chart2"));
    var baroption2 = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data:['正面','中性','负面']
        },
        color: ['#1ab394', '#f8ac59', '#ed5565', '#ffcc00'],
        series: [
            {
                name:'',
                type:'pie',
                radius: ['40%', '60%'],
                label: {
                    normal: {
                        formatter: '  {b|{b}：}{c}  {per|{d}%}  ',
                        backgroundColor: '#eee',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        borderRadius: 4,
                        // shadowBlur:3,
                        // shadowOffsetX: 2,
                        // shadowOffsetY: 2,
                        // shadowColor: '#999',
                        // padding: [0, 7],
                        rich: {
                            // abg: {
                            //     backgroundColor: '#333',
                            //     width: '100%',
                            //     align: 'right',
                            //     height: 22,
                            //     borderRadius: [4, 4, 0, 0]
                            // },
                            hr: {
                                borderColor: '#aaa',
                                width: '100%',
                                borderWidth: 0.5,
                                height: 0
                            },
                            b: {
                                fontSize: 13,
                                lineHeight: 22
                            },
                            per: {
                                color: '#eee',
                                backgroundColor: '#334455',
                                padding: [2, 4],
                                borderRadius: 2
                            }
                        }
                    }
                },
                data:[
                    {value:335, name:'正面'},
                    {value:310, name:'中性'},
                    {value:234, name:'负面'}
                ]
            }
        ]
    };
    barChart2.setOption(baroption2);
    $(window).resize(barChart2.resize);
});


